<template>
  <div class="content_index">
    <div class="ci_header">
      <div class="ci_left">文件存证房间</div>
    </div>
    <div class="ci_note">
      <DescriptionBlock data="展示文件存证房列表" />
    </div>
    <div class="ci_des">
      <div style="display: flex">
        <el-button plain @click="showInvitation"> 文件存证 </el-button>
      </div>
      <div style="display: flex">
        <!-- 搜索框 -->
        <el-input
          style="margin-right: 10px"
          class="ci_input"
          v-model="evidenceName"
          clearable
          maxlength="50"
          placeholder="存证名称"
        ></el-input>
        <el-select
          v-model="useEncrypt"
          clearable
          placeholder="是否加密"
          style="margin-right: 10px"
        >
          <el-option label="不加密" value="0" />
          <el-option label="加密" value="1" />
        </el-select>
        <el-select
          v-model="evidenceType"
          clearable
          placeholder="存证类型"
          style="margin-right: 10px"
        >
          <el-option label="哈希" value="0" />
          <el-option label="图片" value="1" />
          <el-option label="文档" value="2" />
          <el-option label="音频视频" value="3" />
          <el-option label="混合类型" value="4" />
        </el-select>
        <el-date-picker
          v-model="time"
          type="datetimerange"
          format="YYYY-MM-DD"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          style="width: 2rem; margin-right: 10px"
        />

        <div @click="search">
          <el-button plain>查询 </el-button>
        </div>
      </div>
    </div>
    <div class="ci_content">
      <div class="table_list">
        <div class="tl_table">
          <el-table
            v-loading="pictLoading"
            :data="tableData"
            height="100%"
            width="100%"
            :header-cell-style="tableHeaderStyle"
            :cell-style="tableCellStyle"
          >
            <el-table-column prop="evidenceId" label="存证编号" width="120">
              <template v-slot="scope">
                <el-tooltip
                  effect="light"
                  :content="scope.row.evidenceId"
                  placement="top"
                >
                  <a
                    class="ellipsis"
                    @click="
                      DocumentInfo(scope.row.evidenceId, scope.row.status)
                    "
                    style="cursor: pointer; color: #2186fb"
                    >{{ scope.row.evidenceId }}</a
                  >
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="evidenceName" label="存证名称" width="180">
              <template v-slot="scope">
                <el-tooltip
                  effect="light"
                  :content="scope.row.evidenceName"
                  placement="top"
                >
                  <div class="ellipsis">
                    {{ scope.row.evidenceName }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="evidenceType" label="存证类型">
              <template v-slot="scope">
                {{
                  scope.row.evidenceType === "0"
                    ? "哈希"
                    : scope.row.evidenceType === "1"
                    ? "图片"
                    : scope.row.evidenceType === "2"
                    ? "文档"
                    : scope.row.evidenceType === "3"
                    ? "音频视频"
                    : scope.row.evidenceType === "4"
                    ? "混合类型"
                    : "--"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="txId" label="交易哈希" width="180">
              <template v-slot="scope">
                <el-tooltip
                  effect="light"
                  :content="scope.row.txId"
                  placement="top"
                >
                  <div class="ellipsis">
                    {{ scope.row.txId }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="useEncrypt" label="是否加密" width="120">
              <template v-slot="scope">
                {{
                  scope.row.useEncrypt === "0"
                    ? "不加密"
                    : scope.row.useEncrypt === "1"
                    ? "加密"
                    : "--"
                }}
              </template>
            </el-table-column>

            <el-table-column prop="txTime" label="交易时间" />
            <el-table-column prop="status" label="存证状态" width="180">
              <template v-slot="scope">
                <StatusTag
                  v-show="scope.row.status === '0'"
                  color="blueing"
                  :status="statusMap[scope.row.status]"
                />
                <StatusTag
                  v-show="scope.row.status === '1'"
                  color="green"
                  :status="statusMap[scope.row.status]"
                />
                <StatusTag
                  v-show="scope.row.status === '2'"
                  color="red"
                  :status="statusMap[scope.row.status]"
                />
              </template>
            </el-table-column>
            <el-table-column prop="updatedTime" label="更新时间" />
          </el-table>
        </div>
        <div class="tl_table_pagination">
          <el-pagination
            @size-change="handleSizeChange"
            :hide-on-single-page="page.isPageHide"
            @current-change="handleCurrentChange"
            :current-page.sync="page.pageNo"
            :page-size="page.pageSize"
            :page-sizes="[10, 15, 20, 30]"
            layout="total, prev, pager, next, sizes"
            :total="page.totalCount"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { dateToStringBySecond } from "@/utils/tool";
import { tableHeaderStyle, tableCellStyle } from "@/utils/tableStyle";
import { getEvidenceFile } from "@/api/existingEvidence";
import { DescriptionBlock, StatusTag } from "@/components/index";
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const statusMap = {
  0: "存证中",
  1: "存证成功",
  2: "存证失败",
};
const pictLoading = ref(false);
const useEncrypt = ref("");
const evidenceType = ref("");
const evidenceName = ref("");
const page = reactive({
  pageSize: 10,
  pageNo: 1,
  isPageHide: false,
  totalPage: 0,
  totalCount: 0,
});
const time = ref([]);
const setIntervalTime = ref(null);
const dialogWidth = ref("600px");
const tableData = ref([]);
const DocumentInfo = (id, status) => {
  if (status === "0") {
    ElMessage.warning("存证中，无法查看明细！");
    return;
  } else if (status === "2") {
    ElMessage.warning("存证失败，无法查看明细！");
    return;
  } else {
    router.push({ path: "/ExistingEvidence/DocumentDetail", query: { id } });
  }
};
const search = () => {
  getEvidenceFileList();
};
const handleSizeChange = (val) => {
  page.pageNo = 1;
  page.pageSize = val;
  getEvidenceFileList();
};
const handleCurrentChange = (val) => {
  page.pageNo = val;
  getEvidenceFileList();
};
const showInvitation = () => {
  router.push({ path: "/ExistingEvidence/DocumentAdd" });
};
const setDialogWidth = () => {
  let val = document.body.clientWidth * 0.6;
  const def = 600; // 默认宽度
  if (val < def) {
    dialogWidth.value = "60%";
  } else {
    dialogWidth.value = def + "px";
  }
};

const getEvidenceFileList = () => {
  let parmars = {
    pageNum: page.pageNo,
    pageSize: page.pageSize,
    evidenceName: evidenceName.value,
    evidenceType: evidenceType.value,
    useEncrypt: useEncrypt.value,
    startTime: time.value ? dateToStringBySecond(time.value[0]) : "",
    endTime: time.value ? dateToStringBySecond(time.value[1]) : "",
  };
  pictLoading.value = true;
  getEvidenceFile(parmars)
    .then((res) => {
      if (res.success) {
        pictLoading.value = false;
        tableData.value = res.data.list || [];
        page.totalCount = res.data.totalCount;
      } else {
        pictLoading.value = false;
      }
    })
    .catch((err) => {
      ElMessage.error(err.msg);
      pictLoading.value = false;
    });
};
onMounted(() => {
  setDialogWidth();
  getEvidenceFileList();
  setIntervalTime.value = setInterval(() => {
    getEvidenceFileList();
  }, 10000);
});
onUnmounted(() => {
  clearInterval(setIntervalTime.value);
});
</script>
  <style lang="scss" scoped>
@import "../../assets/css/list.scss";
@import "../../assets/css/position.scss";

.content_index {
  :deep.el-input {
    width: 90%;
    max-width: 400px;
  }
  :deep .iconfont__header_icon {
    width: 16px;
    margin-top: 8px;
  }
  .title_personal {
    font-size: 16px;
    font-weight: 700;
  }
  .tl_table_pagination {
    width: 100%;
    display: flex;
    justify-content: end;
    padding-right: 16px;
  }
}
.content_index {
  :deep.el-select {
    width: 95%;
    border-radius: 0;

    :deep .el-input {
      width: 95%;
      border-radius: 0 !important;
    }
    .el-input__suffix {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-input__inner {
      height: 32px;
      line-height: 32px;
      border-radius: 0;
      font-size: 12px;
    }
  }
}

.aitem {
  cursor: pointer;
  color: #2186fb;
}

.nodata_tips {
  margin-left: 5px;
  color: #2186fb;
  cursor: pointer;
}
</style>